<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
.layui-layer.layui-layer-page{
	background:#f3f3f4;
}
</style>
<body class="gray-bg" style="color:#000;">
	
	<div class="container-div ui-layout-center" id="container-div">
		<div id="planDiv" style="padding:15px 0;margin: 0 5px;">
			<div class="row" v-for="(item,key) in dataEchart" style="box-shadow: 1px 1px 3px rgba(0,0,0,.4);padding:20px 20px;background:#fff;border-radius: 5px;margin-bottom: 10px;">
				<div style="float:left;">
					<img v-if="item.planConfig.planCfgType!='MDE'&&item.planConfig.planCfgType!='PM'&&item.planConfig.planCfgType!='SE'&&item.planConfig.planCfgType!='TSE'" src='../img/Java.jpg' style="width: 220px;height: 140px;border-radius: 10px;overflow:hidden;border:1px solid #bbb;" class="imgAvtive" @click="detail(key)">
					<img v-else :src='"../img/"+item.planConfig.planCfgType+".png"' style="width: 220px;height: 140px;border-radius: 10px;overflow:hidden;border:1px solid #bbb;" class="imgAvtive" @click="detail(key)">
				</div>
				<div class="col-sm-8" style="float:left;">
					<div style="font-size:17px;font-weight:700;" :id="'planName'+key" ><span style="display:none;">{{item.planConfig.planCfgId}}</span>{{item.planConfig.planCfgName}}</div>
					<div style="line-height:30px;float:left;"><span>计划类型： </span><span>{{item.planConfig.planCfgType}}</span></div>
					<div style="line-height:30px;margin-left:250px;"><span>部门： </span><span>{{item.planConfig.planDeptName}}</span></div>
					<div style="line-height:30px;max-height: 60px;text-overflow: ellipsis;overflow: hidden;"><span>计划课程： </span>
						<span v-for="item2 in item.itemNames">{{item2}}；</span>
					</div>
					<div class="row" style="line-height:33px;">
						
						<div  class="col-sm-6"><span>计划开始时间： </span><span>{{item.planConfig.planCfgStartTime}}</span></div>
						<div  class="col-sm-6"><span>计划结束时间： </span><span>{{item.planConfig.planCfgEndTime}}</span></div>
					</div>
					<div style="height:46px;line-height: 23px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;"><span>计划描述：</span>{{item.planConfig.planCfgRemark}}</div>
				</div>
				<div class="col-sm-1" style="padding:0;text-align:center;margin-left:10px;width:70px;height:160px;float:right;">
					
		       		<a class="btn btn-success"  style="margin-top:45px;width:68px;" @click="detail(key)" shiro:hasPermission="personal:overview:view">详情</a>
		        	<a v-if="item.join ==false " class="btn btn-success" style="margin-top:10px;width:68px;" @click="signPlan(key)"> 报名</a>
		         	<a v-else class="btn btn-success disabled" style="margin-top:10px;width:68px;" > 已报名</a>
		      		
		        </div>
		    </div>
		</div>
	</div>
	
	<div th:include="include :: footer"></div>
	<script th:src="@{/js/vue.js}"></script>
	<script th:src="@{/ajax/libs/layui/lay/modules/upload.js}"></script>
	<script th:inline="javascript">
	window.signPagedetailFlag=[[${@permission.hasPermi('personal:sign:detail')}]];
		window.signPage=new Vue({
			el:"#container-div",
			data:{
				dataEchart:[],
				detailFlag:window.signPagedetailFlag,
				planDetail:{
					performance:[],
					customFiled:[],
					planClass:[]
				}
			},
			mounted: function(){
				this.planDisplay();
			
			},
			methods: {
				planDisplay: function(){
					var _this=this;
					 $.ajax({
						 url: location.origin+"/personal/sign/list",
		     	        type: "post",
		     	        dataType: "json",
		     	        success: function(result) {
		     	        	_this.dataEchart=result.perPlanInfos;
		     	        },
		     	        error: function(){
		     	        	$.modal.alertError(result.msg);
		     	        }
					 });  
				},
				signPlan: function(ID){
					 var _this=this;
					 var planId='';
					 var planStatus="";
					 var simple;
					 for(var i=0;i<_this.dataEchart.length;i++){
					 	if(i==ID){
					 		planId=_this.dataEchart[i].planConfig.planCfgId;
					 		simple=_this.dataEchart[i].planConfig.simple;
					 		sessionStorage.setItem("planId",planId);
					 	}
					 }

					$.modal.confirm("你确定报名该计划吗？",function(){
						
						if(simple==false){
							planTypeUpload();
						}else{
							$.ajax({
								url:"/personal/sign/add/simple",
				     	        type: "post",
				     	        dataType: "json",
				     	        data: {
				     	        	"planId":planId
				     	        },
				     	        success: function(result) {
				     	        	if(result.code=="500"){
				     	        		$.modal.alertError(result.msg);
				     	        	}else{
				     	        		$.modal.msgSuccess("报名成功");
				     	        	}
				     	        	_this.planDisplay();
				     	        },
				     	        error: function(result){
				     	        	$.modal.alertError(result.msg);
				     	        }
							 });   
						}
					})
				},
				
				detail:function(Id,width,height){
					  var _this=this;
					  var planId="";
					  for(var i=0;i<_this.dataEchart.length;i++){
						 if(i==Id){
							 planId=_this.dataEchart[i].planConfig.planCfgId;
						 }
					  }
					  var html_str="";
					  $.ajax({
							url:" /personal/sign/list/detail",
			     	        type: "post",
			     	        dataType: "json",
			     	        data:{
			     	        	'id':planId
			     	        },
			     	        success: function(result) {

			     	        	_this.planDetail=result;
			     	        	html_str+='<div style="margin: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);background: #fff;padding: 10px 0px;border-radius: 5px;">';
		     	        		html_str+='<table style="border:1px solid #ccc !important;border-left:none;margin:5px 15px;">';
		     	        		html_str+='<tr style="background: #1f90d8c4;color: #fff;">';
		     	        		html_str+='<th style="border-left:1px solid #ccc;padding:5px;">课程名称</th>';
		     	        		html_str+='<th style="border-left:1px solid #ccc;padding:5px;">讲师</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;">分数</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;">开始时间</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;">结束时间</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;">权重</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;">描述</th>';
		     	        		html_str+='</tr>';
		     	        		
			     	        	for(var i=0;i< _this.planDetail.planClass.length;i++){
			     	        		html_str+='	<tr v-for="item in planDetail.planClass" style="border-top:1px solid #ccc;">';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].planClassName+'</td>';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].planClassTeacher+'</td>';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].planClassTotalScore+'</td>';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].planClassBeginTime+'</td>';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].planClassEndTime+'</td>';
			     	        		html_str+='	<td style="width:50px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].weight+'</td>';
			     					html_str+='	<td style="width:300px;border-left:1px solid #ccc;padding:5px;">'+_this.planDetail.planClass[i].planClassDesc+'</td>';
			     					html_str+='	</tr>';
			     					
			     	        	}
			     	        	html_str+='	</table>';
			     	        	html_str+='</div>';
			     	        	
			     	       		html_str+='<div style="margin:30px 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);background: #fff;padding: 10px 0px;border-radius: 5px;">';
			     	        	html_str+='<table style="border:1px solid #ccc !important;border-left:none;margin:9px 15px;width:746px;">';
			     	          	html_str+='<tr style="background: #1f90d8c4;color: #fff;">';
			     	        	html_str+='<th style="border-left:1px solid #ccc;padding:5px;width:188px;">绩效名称</th>';
			     	        	html_str+='	<th style="border-left:1px solid #ccc;padding:5px;width:188px;">绩效描述</th>';
			     	        	html_str+='	<th style="border-left:1px solid #ccc;padding:5px;width:188px;">权重</th>';
			     	        	html_str+='</tr>';
			     	        	for(var i=0;i<_this.planDetail.performance.length;i++){
			     	        		html_str+='<tr v-for="item in planDetail.planClass" style="border-top:1px solid #ccc;">';
				     	        	html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:190px;">'+_this.planDetail.performance[i].planAchName+'</td>';
				     	        	html_str+='		<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:188px;">'+_this.planDetail.performance[i].planAchDesc+'</td>';
				     	        	html_str+='		<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:188px;">'+_this.planDetail.performance[i].weight+'</td>';
				     	       		html_str+='</tr>';
			     	        	}
			     	       		html_str+='</table>';
			     	       		html_str+='</div>';
			     	       		
			     	       		html_str+='<div style="margin:30px 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);background: #fff;padding: 10px 0px;border-radius: 5px;">';
			     	       		html_str+='<table style="border:1px solid #ccc !important;border-left:none;margin:8px 15px;width:746px;">';
		     	          		html_str+='<tr style="background: #1f90d8c4;color: #fff;">';
		     	        		html_str+='<th style="border-left:1px solid #ccc;padding:5px;width:280px;" >自定义考核项名称</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;width:230px;">分数</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;width:230px;">权重</th>';
		     	        		html_str+='</tr>';
		     	        		for(var i=0;i<_this.planDetail.customFiled.length;i++){
		     	        			html_str+='<tr v-for="item in planDetail.planClass" style="border-top:1px solid #ccc;">';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:280px;">'+_this.planDetail.customFiled[i].planCusName+'</td>';
			     	        		html_str+='		<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:230px;">'+_this.planDetail.customFiled[i].planCusTotalScore+'</td>';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:230px;">'+_this.planDetail.customFiled[i].weight+'</td>';
			     	       			html_str+='</tr>';
		     	        		}
		     	       			html_str+='</table>';
								html_str+='</div>';
								
								html_str+='<div style="margin: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);background: #fff;padding: 10px 0px;border-radius: 5px;">';
			     	       		html_str+='<table style="border:1px solid #ccc !important;border-left:none;margin:5px 15px;width:755px;">';
		     	          		html_str+='<tr style="background: #1f90d8c4;color: #fff;">';
		     	        		html_str+='<th style="border-left:1px solid #ccc;padding:5px;width:280px;" >绩效等级</th>';
		     	        		html_str+='	<th style="border-left:1px solid #ccc;padding:5px;width:230px;">分数</th>';
		     	        		html_str+='</tr>';
		     	        		for(var i=0;i<_this.planDetail.perfConfig.length;i++){
		     	        			html_str+='<tr v-for="item in planDetail.planClass" style="border-top:1px solid #ccc;">';
			     	        		html_str+='	<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:280px;">'+_this.planDetail.perfConfig[i].level+'</td>';
			     	        		html_str+='		<td style="width:100px;border-left:1px solid #ccc;padding:5px;width:230px;">'+_this.planDetail.perfConfig[i].score+'</td>';
			     	       			html_str+='</tr>';
		     	        		}
		     	       			html_str+='</table>';
		     	       			html_str+='</div>';
			     	      	  // var _url = "/personal/sign/list/detail?id="+planId;
					           var _width = "800";
					           var _height = ($(window).height() - 50);
					            	
					           if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
					            	    _width = 'auto';
					            	    _height = 'auto';
					           }
					           layer.open({
					            		type: 1,
					            		area: [_width + 'px', _height + 'px'],
					            		fix: false,
					            		//不固定
					            		maxmin: true,
					            		shade: 0.3,
					            		title:"计划详细",
					            		content:html_str,
					            		btn: '关闭',
					            	    // 弹层外区域关闭
					            		shadeClose: true,
					            		success: function(layer) {
					            			layer[0].childNodes[3].childNodes[0].attributes[0].value='layui-layer-btn1';
					            		},
					            		btn1: function(index) {
					            			layer.close(index);
					            	    }
					            }); 
			     	      	  },
			     	        error: function(result){
			     	        	$.modal.alertError(result.msg);
			     	        }
					   });  
			         
				}
			}
		})
		
		function planTypeUpload(){
				var url='/personal/sign/add';
	            	
	            var	width = 800;
	            var height = ($(window).height() - 50);
	            layer.open({
	            		type: 2,
	            		area: [width + 'px', height + 'px'],
	            		fix: false,
	            		//不固定
	            		maxmin: true,
	            		shade: 0.3,
	            		title: "添加文件",
	            		content: url,
	            		btn: ['确定'],
	            	    // 弹层外区域关闭
	            		shadeClose: true,
	            		yes: function(index, layero) {
	            	        var iframeWin = layero.find('iframe')[0];
	            	        iframeWin.contentWindow.submitHandler();
	            	    },
	            	    cancel: function(index) {
	            	        return true;
	            	    }
	            });
		}
		
	</script>
</body>
</html>